<template>
	<view class="cart" :class="{'none': noMoreList}">
		<uni-nav-bar :fixed="true" :border="false" backgroundColor="#f9f2ea" left-text="购物车" :statusBar="true">
		</uni-nav-bar>
		<view class="manage" @click="deleteShowChange">
			{{deleteShow ? "完成" : "管理"}}
		</view>
		<view class="goods-item flex" v-for="(item, index) in cartList" :key="index">
			<view class="icon-box" @click="radioClick(index)">
				<view class="icon" :class="{'active': item.choose == true}">
					<view class="icon-content">

					</view>
				</view>
			</view>
			<image class="img" :src="item.thumb" @click="toArtworkDetails(item)" mode=""></image>
			<view class="item-right">
				<view class="goods-top-left">
					<view class="name flex-between">
						<view class="">
							{{item.name || "艺术品"}}
						</view>
					</view>
					<view class="specs flex-between">
						<text>{{item.spec_name || ""}}</text>

					</view>
					<view class="price-box flex-between">
						<view class="price">
							￥{{(item.price * item.goods_num).toFixed(2)}}
						</view>
						<view class="number-box flex">
							<view class="reduce frame" @click="reduce(index)">
								<image class="img" v-if="item.goods_num>1" src="../../static/reduce.png" mode="">
								</image>
								<image class="img" v-else src="../../static/unreduce.png" mode=""></image>
							</view>
							<view class="number">
								{{item.goods_num}}
							</view>
							<view class="add frame" @click="add(index)">
								<image class="img" v-if="item.goods_num<item.stock" src="../../static/add.png" mode="">
								</image>
								<image class="img" v-else src="../../static/unadd.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom flex-between" v-show="!deleteShow">
			<view class="bottom-left flex" @click="allSelectClick">
				<view class="icon" :class="{'active': allSelect}">
					<view class="icon-content">

					</view>
				</view>

				<view class="text">
					全选
				</view>
			</view>
			<view class="bottom-right flex">
				<view class="right-text">
					合计：
					<text class="price">￥{{totals}}</text>
				</view>
				<view class="btn" @click="buyNow">
					结算
				</view>
			</view>
		</view>
		<view class="nomore" v-if="noMoreList">
			<image class="haveno" src="../../static/cart_none.png" mode=""></image>
			<view>购物车空空如也</view>
		</view>
		<view class="bottom flex-between" v-show="deleteShow">
			<view class="bottom-left flex" @click="allSelectClick">
				<view class="icon" :class="{'active': allSelect}">
					<view class="icon-content">

					</view>
				</view>

				<view class="text">
					全选
				</view>
			</view>
			<view class="bottom-right flex">
				<view class="btn" @click="cartDelete">
					删除
				</view>
			</view>
		</view>
		<FootBar></FootBar>
	</view>
</template>

<script>
	import {
		getCartList,
		changeCartNumber,
		delCart,
		accountOrder
	} from "@/api/public.js"
	import FootBar from '@/components/footbar.vue'
	export default {
		data() {
			return {
				orderType: 1,
				deleteShow: false,
				cartList: [],
				allSelect: false,
				totals: 0.00,
				noMoreList: false,
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			navChange(type) {
				this.orderType = type;
				this.cartList = [];
				this.deleteShow = false;
				this.allSelect = false;
				this.totals = 0.00;
				this.getList();
			},
			getList() {
				getCartList().then(res => {
					console.log(res.reData.data)
					if (!res.reData.data || res.reData.data.length == 0) {
						this.noMoreList = true
					} else {
						this.noMoreList = false
					}
					this.cartList = res.reData.data;
				})
			},
			toArtworkDetails(item) {
				if (item.goods_type == 1) {
					uni.navigateTo({
						url: "../index/artWorkDetails?id=" + item.goods_id
					})
				} else {
					uni.navigateTo({
						"url": "ar"
					})
				}
			},
			// 单个点选
			radioClick(index) {
				console.log(index)
				if (this.cartList[index].choose) {
					this.$set(this.cartList[index], "choose", false);
				} else {
					this.$set(this.cartList[index], "choose", true);
				}
				this.isAllSelect();
				this.countTotal();
			},
			// 点击 全选、取消全选
			allSelectClick() {
				if (this.allSelect) {
					for (let i in this.cartList) {
						this.$set(this.cartList[i], "choose", false);
					}
					this.allSelect = false;
				} else {
					for (let i in this.cartList) {
						this.$set(this.cartList[i], "choose", true);
					}
					this.allSelect = true;
				}
				this.countTotal();
			},
			// 判断是否全选
			isAllSelect() {
				let select = true;
				for (let i in this.cartList) {
					if (this.cartList[i].choose) {

					} else {
						select = false;
					}
				}
				this.allSelect = select;
			},
			// 计算总价
			countTotal() {
				let count = 0
				for (let i in this.cartList) {
					if (this.cartList[i].choose) {
						count += this.cartList[i].price * this.cartList[i].goods_num;
					}
					console.log(this.cartList[i].price, this.cartList[i].goods_num, this.cartList[i].price * this.cartList[
						i].goods_num)
				}
				this.totals = count.toFixed(2);
			},
			reduce(index) {
				if (this.cartList[index].goods_num > 1) {
					this.$set(this.cartList[index], "goods_num", --this.cartList[index].goods_num);
					changeCartNumber(this.cartList[index].id, this.cartList[index].goods_num).then(res => {

					});
					if (this.cartList.length > 0) {
						this.countTotal()

					}

				}
			},
			add(index) {
				if (this.cartList[index].goods_num < this.cartList[index].stock) {
					this.$set(this.cartList[index], "goods_num", ++this.cartList[index].goods_num);
					changeCartNumber(this.cartList[index].id, this.cartList[index].goods_num).then(res => {

					});
					if (this.cartList.length > 0) {
						this.countTotal()

					}

				} else {
					uni.showToast({
						title: "库存不足",
						icon: "none"
					})
					return false
				}
			},
			deleteShowChange() {
				this.deleteShow = !this.deleteShow;
				for (let i in this.cartList) {
					this.$set(this.cartList[i], "choose", false);
				}
				this.allSelect = false;
			},
			cartDelete() {
				uni.showModal({
					title: '提示',
					content: '是否删除选中商品',
					success: (res) => {
						if (res.confirm) {
							for (let i in this.cartList) {
								if (this.cartList[i].choose) {
									delCart(this.cartList[i].id).then(res => {
										console.log(res.reData)
									})
								}
							}
							this.getList();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			buyNow() {
				let arr = [];
				for (let i in this.cartList) {
					if (this.cartList[i].choose) {
						if (this.cartList[i].stock == 0 || this.cartList[i].stock < this.cartList[i].goods_num) {
							uni.showToast({
								title: "暂无库存",
								icon: "none"
							})
							return false
						} else {
							arr.push({
								"goods_id": this.cartList[i].goods_id,
								"goods_num": this.cartList[i].goods_num,
								"goods_type": this.cartList[i].goods_type
							})
						}
					}
				}
				if (arr.length == 0) {
					return false
				}
				let str = JSON.stringify(arr);
				accountOrder(str).then(res => {
					if (res.result == 0) {
						uni.setStorageSync("accountsType", 2);
						uni.navigateTo({
							url: "../shoppingCart/confirmOrder?goods=" + str
						})
					}
				})
			},
		},
		onShow() {
			this.getList();
			this.allSelect = false;
			this.totals = 0.00;
		},
		components: {
			FootBar
		}
	}
</script>

<style lang="scss" scoped>
	.cart {
		// padding-bottom: 100rpx;

		&.none {
			height: 100%;
			background: #fff;
		}
	}

	.manage {
		padding: 10rpx 30rpx 20rpx;
		font-size: 30rpx;
		line-height: 40rpx;
		text-align: right;

	}

	.nav {
		width: 100%;
		background: #fff;
		display: flex;
		justify-content: space-around;
		margin-bottom: 10rpx;

		.nav-box {
			width: 50%;
		}

		.nav-item {
			box-sizing: border-box;
			width: 100rpx;
			margin: 0 auto;
			font-size: 26rpx;
			text-align: center;
			line-height: 64rpx;

			&.active {
				color: #d12a3e;
				border-bottom: 6rpx solid #d12a3e;
			}
		}
	}

	.goods-item {
		width: 640rpx;
		margin: 0 auto 30rpx;
		padding: 30rpx;
		background: rgba(255, 250, 245, 1);
		border-radius: 20rpx;
		align-items: center;
		box-shadow: 2px 2px 4px rgba(186, 162, 138, 0.18);

		.icon-box {
			box-sizing: border-box;
			height: 160rpx;
			padding-top: 64rpx;
		}

		.icon {
			box-sizing: border-box;
			width: 18px;
			height: 18px;
			padding: 4px;
			border: 1px solid #ccc;
			border-radius: 10px;
			margin-right: 16rpx;

			.icon-content {
				width: 8px;
				height: 8px;
				border-radius: 4px;
				background: #fff;
			}

			&.active {
				border: 1px solid rgba(214, 142, 127, 1);

				.icon-content {
					background: rgba(214, 142, 127, 1);
				}
			}
		}

		.choose {
			width: 18px;
			height: 18px;
			margin-right: 16rpx;
		}

		.img {
			width: 160rpx;
			height: 160rpx;
			margin-right: 30rpx;
			flex-shrink: 0;
		}

		.item-right {
			height: 160rpx;
			flex-grow: 1;

			.item-right-top {
				margin-bottom: 20rpx;
			}

			.goods-top-left {
				flex-grow: 1;

				.name {

					font-size: 28rpx;
					line-height: 30rpx;
					color: rgba(84, 54, 54, 1);
					margin-bottom: 20rpx;
					max-width: 400rpx;
					overflow: hidden;

					>.price {
						font-weight: 400;
						color: #d6323b;
					}
				}

				.specs {

					margin-bottom: 20rpx;


					width: 360rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;

					>text {
						padding: 6rpx 10rpx;
						border-radius: 8rpx;
						font-size: 24rpx;
						line-height: 32rpx;
						color: rgba(212, 148, 135, 1);
						background-color: rgba(249, 242, 234, 1);

					}
				}

				.colour {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #666;
					margin-bottom: 20rpx;
				}

				.post {
					font-size: 22rpx;
					line-height: 22rpx;
					color: #ccc;
					margin-bottom: 20rpx;
				}

				.price-box {
					color: rgba(214, 142, 127, 1);

					.price {
						font-size: 36rpx;
						font-weight: 700;
					}

					.number {
						font-size: 26rpx;
					}
				}
			}

			.inventory {
				text-align: right;
				height: 36rpx;
				font-size: 24rpx;
				line-height: 36rpx;
				color: #999;
				white-space: nowrap;
			}

			.type {
				font-size: 22rpx;
				line-height: 22rpx;
				color: #666;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.number-box {
				.frame {
					width: 48rpx;
					height: 48rpx;

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.number {
					width: 50rpx;
					text-align: center;
					margin: 0 10rpx;
					line-height: 46rpx;
					color: #333;
					font-size: 26rpx;
				}
			}
		}
	}

	.nomore {
		padding-bottom:260rpx;
		text-align: center;

		.haveno {
			margin: 0 auto;
		}
	}

	.bottom {
		align-items: center;
		box-sizing: border-box;
		position: fixed;
		bottom: 160rpx;
		width: 100%;
		height: 100rpx;
		background: rgba(255, 250, 245, 1);
		padding: 10rpx 30rpx;

		.bottom-left {
			height: 80rpx;
			box-sizing: border-box;
			padding-top: 24rpx;
		}

		.icon {
			box-sizing: border-box;
			width: 18px;
			height: 18px;
			border: 1px solid #ccc;
			border-radius: 10px;
			margin-right: 30rpx;
			padding: 4px;

			.icon-content {
				width: 8px;
				height: 8px;
				border-radius: 4px;
				background: #fff;
			}

			&.active {
				border: 2rpx solid rgba(214, 142, 127, 1);

				.icon-content {
					background: rgba(214, 142, 127, 1);
				}
			}
		}

		.text {
			font-size: 26rpx;
			line-height: 32rpx;
			color: rgba(84, 54, 54, 1);
		}

		.bottom-right {
			align-items: center;
		}

		.right-text {
			font-size: 24rpx;
			color: #333;
			margin-right: 30rpx;

			.price {
				font-size: 36rpx;
				color: rgba(214, 142, 127, 1);
				font-weight: 700;
			}
		}

		.btn {
			width: 160rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: rgba(214, 142, 127, 1);
			color: #fff;
			text-align: center;
			font-size: 28rpx;
			line-height: 80rpx;
			box-shadow: 5px 5px 10px rgba(189, 185, 166, 0.5);
		}
	}
</style>
